// 封装所有的自定义指令
export const imgerror = {
  // 当元素使用这个自定义指令时会触发
  inserted: function (dom, options) {
    // 给图片添加一个事件： onerror
    // 如果图片的路径为空，图片也加载不出来，但是不会触发图片的 onerror 事件
    // 判断图片的路径是否为空，如果图片的路径为空，我们就将图片设置为默认图片
    dom.src = dom.src || options.value
    dom.onerror = function () {
      // 说明图片没有加载成功，需要加载一个默认的图片 options.value 中传入一张图片
      dom.src = options.value
    }
  },
  // 当元素发生修改时会触发
  componentUpdated: function (dom, options) {
    dom.src = dom.src || options.value
  }
}
export const dirone = {
  inserted: function () {
    console.log('自定义指令：one')
  }
}
export const dirtwo = {
  inserted: function () {
    console.log('自定义指令：two')
  }
}
export const dirthree = {
  inserted: function () {
    console.log('自定义指令：three')
  }
}

// // 定义一个自定义指令：（给图片使用）
// Vue.directive('imgerror', {
//   inserted: function (dom, options) {
//     // 给图片添加一个事件： onerror
//     dom.onerror = function () {
//       // 说明图片没有加载成功，需要加载一个默认的图片 options.value 中传入一张图片
//       dom.src = options.value
//     }
//   }
// })
// // 定义自定义指令2：
// Vue.directive('dirone', {
//   inserted: function () {
//     console.log('自定义指令：one')
//   }
// })
// // 定义自定义指令3：
// Vue.directive('dirtwo', {
//   inserted: function () {
//     console.log('自定义指令：two')
//   }
// })
